<!--写一个超级管理员可以进去的入口，不需要登录直接访问所有的中心-->
<template>
  <div id="servers" >
    <div @click="handle(server1.path)" @mousedown.prevent="handleMouseDown"  :class="index===3?'clearfix':'server'" v-for="(server1,index) in servers" :key="index"><strong> {{server1.name}}
    </strong>
      <img v-if="index!==3" :src="server1.img" style="width: 140px; height: 140px;margin: 20px auto"></div>
  </div>
</template>

<script>
import router from "@/router";


export default {
  name:"home",
  data(){
    return{
      serverIndex:'',
      isClean:false,
      servers:[
        {
          path:'/orderManage',
          name:"客户服务中心",
          img:'https://media-public.canva.cn/mnQdc/MAEb0amnQdc/2/s.svg'
        },
     {
       path:'/dispatch_server',
       name:"调度中心",
       img:'https://tse2-mm.cn.bing.net/th/id/OIP-C.csQJZk7V-kUDpKdE--8i9gHaHa?w=185&h=184&c=7&r=0&o=5&dpr=1.3&pid=1.7'
       //img:'https://media-public.canva.cn/Vq7Sk/MAFkwXVq7Sk/1/s.svg'
     },
        {
          path:'/warehouse',
          name:"库房中心",
          img:'https://media-public.canva.cn/uvfjo/MAEuFZuvfjo/1/s.svg'
        },
        {
          name:""
        },

        {
          path:'/main',
          name:"配送中心",
          img:require('../assets/s.svg')
        },
        {
          path:'/operation',
          name:"业务中心",
          img:'https://media-public.canva.cn/hFJvs/MAEVKshFJvs/1/s.svg'
        },
        {
          path: '/financial',
          name:"财务中心",
          img:'https://media-public.canva.cn/iMekg/MAEwpJiMekg/1/s.svg'
        },
      ]
    }
  },
  methods:{
    handleMouseDown(event){
      event.preventDefault();
    },
    //跳转新开窗口
    handle(path){
      let routeUrl = router.resolve({
        path: path
      })
      window.open(routeUrl.href, '_blank')

      //router.push(path)

    },
    clean(item){
      console.log(item)
      return (item + 1) % 3 === 0;
    }
  },
}
</script>
<style>
body{
  background-color: rgba(245, 230, 198, 0.7);

}
#servers{

  overflow: hidden;
  margin-left: 200px;
  height:900px;
  width: 1200px;
  padding-top: 10px;

}
.head{
  margin: 15px 0;
}
.clearfix{/*伪元素是行内元素 正常浏览器清除浮动方法*/
  clear:both;
}

.server{
  cursor: pointer;
  font-size: 20px;
  overflow:hidden;
  display: inline-block;
  float: left;
  margin-left: 15px;
  margin-top: 15px;
  width: 350px;
  height: 230px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.5);
  transition: all 0.5s;/*持续时间*/
}
.server:hover{
  margin-top: 12.5px;/*和hover的margin-top有对比，原无30,现在0，相当于上移了,30px*/
  box-shadow: 0 0 20px 2px #918f8f;/*盒子阴影*/
  transition: all 0.5s;/*持续时间*/


}
span {
  margin-right: 25px;
  font-size: 20px;
}
</style>